import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'; 
const store = new Vuex.Store({
	/**
	 * 类似于vue中的data
	 * 
	 *  *.vue中使用方式1
	 *  this.$store.state.serverType
	 * 
	 *  *.vue中使用方式2
	 *  步骤1.vue页面中引入 import {mapState} from 'vuex'; 
	 * 	步骤2.计算属性中添加 computed: { ...mapState(['userInfo','WebScoket']) },
	 *  步骤3.直接使用 this.userInfo
	 */
	state: { 
		// websocket
		isOpenWebSocket: false, // websocket是否连接 默认没有连接false
		msgFlag: false, // 全局的消息提示
		
		userInfo:{},
		serverType: '0',   // 1用于切换调用微云API  其他是XP 
		residenceTime:8 ,  // 授权书页面停留时间  
	},
	
	/**
	 * 相当于vue中的计算属性 
	 * 
	 *  *.vue中使用方式1
	 *  this.$store.getters.getServerType
	 * 
	 *  *.vue中使用方式2
	 *  步骤1.vue页面中引入 import {mapGetters} from 'vuex'; 
	 *  步骤2.计算属性中添加 computed: { ...mapGetters(['getServerType']) },
	 *  步骤3.直接使用 this.getServerType
	 * 
	 */
    getters: {  
        getServerType(state){
            return state.serverType
        },
		getResidenceTime(state){
			return state.residenceTime
		},
		getUserInfo(state){
			return state.userInfo
		}
    },
	
	/**
	 *  类似于methods
	 * 
	 *  1 在mutations中不仅仅能做赋值操作
	 *
	 *  2 作者在mutations中做了类似埋点操作，如果从mutations中操作的话， 能被检测到，可以更方便用调试工具调试，调试工具可以检测到实时变化，而直接改变state中的属性，则无法实时监测
	 *
	 *	注意：mutations只能写同步方法，不能写异步，比如axios、setTimeout等，这些都不能写，mutations的主要作用就是为了修改state的。
	 *
	 *	原因类似：如果在mutations中写异步，也能够调成功，但是由于是异步的，不能被调试工具追踪到，所有不推荐这样写，不利于调试,这是官方的约定。
	 * 
	 *  *.vue中使用方式1 (推荐使用,更清晰)
	 *  this.$store.commit('setServerType',{ serverType:1 })
	 * 
	 *  *.vue中使用方式2
	 *  步骤1.vue页面中引入 import {mapMutations} from 'vuex'; 
	 *  步骤2.方法属性中添加 methods: { ...mapMutations(['setServerType']) } // ==> this.$store.commit('setServerType','6')
	 *  步骤3.直接使用 this.setServerType('1')
	 * 
	 */
	mutations: { 
		setServerType(state, serverType) {
			state.serverType = serverType
		},
		setUserInfo(state, userInfo){
			state.userInfo = userInfo
		},
		setMsgFlag(state, msgFlag) {
			state.msgFlag = msgFlag
		},
	},
	
	/**
	 *  	
	 *	action类似于mutation
	 *	区别：action可以提交mutation
	 * 
	 *	action也不要直接去操作state，而是去操作mutation
	 *	action包含异步操作，类似于axios请求，可以都放在action中写
	 *	action中的方法默认的就是异步，并且返回promise,then接收返回值
	 *	
	 *	*.vue中使用方式1 (推荐使用,更清晰)
 	 *	this.$store.dispatch(‘getUserInfo’)
	 *	
	 *  *.vue中使用方式2 
	 *  步骤1.vue页面中引入 import {mapActions} from 'vuex'; 
	 *  步骤2.方法属性中添加 methods: { ...mapActions(['getUserInfo']) } // ==> this.$store.dispatch('getUserInfo'))
	 *  步骤3.直接使用 this.getUserInfo()
	 *  
	 */
	actions: {
		getUserInfo(){
		    return {
		      nickname:'lyc',
		      age:18
		    }
		},
		setUserInfo({commit},userInfo){
			commit('setUserInfo',userInfo)
		}
		
	}
})

export default store
